<template>
    <div class="order-big-box">
        <div class="icon-box">
            <router-link to='/my'>
                <div>
                    <van-icon name="arrow-left" size="30"/>
                </div>
                <div>我的订单</div>
            </router-link>
        </div>
        <ul class="order-box">
                <li class="orders" v-for="(list, index) in listData" :key="list.id">
                    <div class="order1">
                        <div class="order1-1">
                            <div>{{list.attribute}}</div>
                            <div>
                                <van-icon name="arrow" size="20" color="#808080"/>
                            </div>
                        </div>
                        <div class="order1-2">交易成功</div>
                    </div>
                    <div class="order2">
                        <div class="order-img">
                            <img :src="list.img">
                        </div>
                        <div class="order-inf">
                            {{list.introduce}}
                        </div>
                    </div>
                    <div class="order3">
                        <div>{{list.presentPrice}}</div>
                    </div>
                    <div class="order4">
                        <div @click="remove(index)">删除订单</div>
                    </div>
                </li>
            </ul>
    </div>
</template>

<script>
export default {
    name: "Ord",
    data() {
        return {
            listData: []
        }
    },
    // 接收本地JSON文件
    created() {
        this.axios.get('data/mall.json').then(res => {
            this.listData = res.data;
        })
    },
    methods: {
        // 设置删除按钮的删除事件
        remove(index) {
            this.listData.splice(index,1)
        }
    }
}
</script>

<style scoped>
    .order-big-box {
        background-color: #ffffff;
    }
    ul {
        margin-top: 60px;
    }
    .icon-box {
        padding: 10px;
        height: 40px;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99;
    }
    .icon-box a {
        color: #000000;
        height: 34px;
        line-height: 34px;
        display: flex;
    }
    .icon-box a div {
        line-height: 34px;
    }
    .orders {
        border: #808080 solid 1px;
        border-radius: 10px;
        padding: 5px;
        margin: 10px;
    }
    .order1 {
        display: flex;
        justify-content: space-between;
        height: 30px;
    }
    .order1-1 {
        display: flex;
        justify-content: space-between;
        height: 100%;
        line-height: 30px;
    }
    .order1-1 i {
        line-height: 30px;
    }
    .order1-2 {
        height: 100%;
        line-height: 30px;
        color: #f84802;
        font-size: 14px;
    }
    .order2 {
        height: 30vw;
        display: flex;
        justify-content: space-between;
    }
    .order-img {
        width: 30vw;
        height: 30vw;
        overflow: hidden;
        border-radius: 5px;
    }
    .order-img img {
        height: 30vw;
    }
    .order-inf {
        height: 90px;
        line-height: 30px;
        width: 50vw;
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .order3 {
        height: 30px;
    }
    .order3 div {
        height: 30px;
        line-height: 30px;
        float: right;
        color: #f84802;
    }
    .order4 {
        height: 32px;
    }
    .order4 div {
        height: 30px;
        line-height: 30px;
        float: right;
        border: #808080 solid 1px;
        padding: 0 10px;
        border-radius: 5px;
        color: #808080;
    }
</style>